
//src/views/loginView.tsx
import { Button, Form, Input } from 'antd';
import { useNavigate,useSearchParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import type {Dispatch} from 'redux'
import {useState} from 'react'
import {login} from '../store/auth/action'
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};
function LoginView() {
    //定义dispacth 工具 (发送action 执行reducer)
    const dispatch:Dispatch<any>= useDispatch();
    const [name,setName]= useState('');
    const [password,setPassWord]= useState('');
    const navigate = useNavigate();
    const [search] = useSearchParams();
    const redirect = search.getAll('redirect')[0]||'/admin'
    const callback = ()=>{
      navigate(redirect)
    }
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        dispatch(login({name,password},callback))
      };
    
    return (
    <div className='loginBox'>
        <h2><span className='logotxt'>Evan Lian </span>登录</h2>
        <Form
    name="basic"
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item<FieldType>
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input placeholder='用户名' value={name} onChange={(e)=>{setName(e.target.value)}}/>
    </Form.Item>

    <Form.Item<FieldType>
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input.Password placeholder='密码' value={password} onChange={(e)=>{setPassWord(e.target.value)}}/>
    </Form.Item>
    <Form.Item>
      <Button type="primary" block htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
    </div> );
}

export default LoginView;